<template>
  <div class="zuo">
    <div
      class="callback float"
      @click="onClick"
      @mousedown="down"
      @touchstart="down"
      @mousemove="move"
      @touchmove="move"
      @mouseup="end"
      @touchend="end"
      ref="fu"
    >
      <img @click="callback" src="@/assets/xuanfuc.png" alt />
    </div>
    <hr>
    <div id="app">
      <van-cell-group>
        <van-cell title="运营时长" :value="times"/>
        <van-cell title="接单数" :value="num"/>
        <van-cell title="今日流水" :value="money"/>
        <hr>
        <van-cell title="热力图" @click="toRelitu" is-link/>
        <van-cell title="找附近" @click="toditu" is-link/>
        <van-cell title="偏好设置" is-link/>
      </van-cell-group>
      <hr>
      <van-cell-group>
        <van-cell title="司机资质" value="审核通过"/>
        <van-cell title="车辆资质" value="审核通过"/>
        <van-cell title="司机资质有效期" value="在有效期内"/>
        <van-cell title="车辆资质有效期" value="在有效期内"/>
        <van-cell title="罚时状态" value="无罚时间"/>
        <van-cell title="安全培训" value="已参加最新的安全培训"/>
        <el-link type="warning" v-if="this.times>5" class="yellow">疲劳预警</el-link>
      </van-cell-group>
      <br>
      <br>
      <hr>
      <van-button type="primary" block @click="toJiedan">开始接单</van-button>
      <hr>
      <van-tabbar route>
        <van-tabbar-item icon="home-o" to="/shouye">首页</van-tabbar-item>
        <van-tabbar-item icon="reorder-o" @click="toDingdan" to="/orders">订单</van-tabbar-item>
        <van-tabbar-item icon="wallet-o" @click="toqianbao">钱包</van-tabbar-item>
        <van-tabbar-item icon="chat-o" @click="toxiaoxi">消息</van-tabbar-item>
        <van-tabbar-item icon="my-o" @click="toPersonalCenter" to="/my">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      num: "",
      driverInfo: {},
      tel: '',
      money: "",
      times: "",

      //悬浮窗的参数
      isLoading: false,
      flags: false, //控制使用
      position: {
        x: 0,
        y: 0,
      },
      nx: "",
      ny: "",
      dx: "",
      dy: "",
      xPum: "",
      yPum: "",
    };

  },
  methods: {
    // 根据手机号查询到司机id
    async findDriverByTel() {
      const tel = JSON.parse(localStorage.getItem('login'));
      const response = await axios.post('personal/personal/findByTel?tel=' + tel);
      this.driverInfo = response.data;
      console.log(this.driverInfo);
      return this.driverInfo;
    },
    // 根据id查询订单数
    async jiedanshu() {
      if (!this.driverInfo.id) {
        console.error('司机信息未获取到，无法查询订单数');
        return;
      }
      const response = await axios.post(`order/order/jiedanNum?id=${this.driverInfo.id}`);
      this.num = response.data;
    },
    // 根据司机查流水
    async liushui() {
      if (!this.driverInfo.id) {
        console.error('司机信息未获取到，无法查询流水');
        return;
      }
      const response = await axios.post(`order/order/liushuimoney?id=${this.driverInfo.id}`);
      this.money = response.data;
    },
    // 根据司机id查询运营时长
    async yunyingshichang() {
      if (!this.driverInfo.id) {
        console.error('司机信息未获取到，无法查询运营时长');
        return;
      }
      const response = await axios.post(`order/order/yunyingshichang?id=${this.driverInfo.id}`);
      this.times = response.data;
    },
    toDingdan() {
      this.$router.push("/dcOrders");
    },
    toRelitu() {
      this.$router.push("/heatMap");
    },
    toditu() {
      this.$router.push('/heatMaps');
    },
    toJiedan(id) {
      axios.post("/order/driver/updateStatus?id=" + this.driverInfo.id)
      this.$router.push('/grabOrders');
    },
    toPersonalCenter() {
      this.$router.push('/PersonalCenter');
    },
    toxiaoxi() {
      this.$router.push('/newIndex');
    },

    callback() {
      this.$router.push('/securityCenter');
    },
    toqianbao(){
      this.$router.push('/card');
    },
    onRefresh() {
      // window.location.reload();
      setTimeout((res) => {
        console.log(res);
        this.isLoading = false;
      }, 1000);
    },
    down() {
      this.flags = true;
      var touch;
      if (event.touches) {
        touch = event.touches[0];
      } else {
        touch = event;
      }
      this.position.x = touch.clientX;
      this.position.y = touch.clientY;
      this.dx = this.$refs.fu.offsetLeft;
      this.dy = this.$refs.fu.offsetTop;
    },
    move() {
      if (this.flags) {
        var touch;
        if (event.touches) {
          touch = event.touches[0];
        } else {
          touch = event;
        }
        this.nx = touch.clientX - this.position.x;
        this.ny = touch.clientY - this.position.y;
        this.xPum = this.dx + this.nx;
        this.yPum = this.dy + this.ny;
        let width = window.innerWidth - this.$refs.fu.offsetWidth; //屏幕宽度减去自身控件宽度
        let height = window.innerHeight - this.$refs.fu.offsetHeight; //屏幕高度减去自身控件高度
        this.xPum < 0 && (this.xPum = 0);
        this.yPum < 0 && (this.yPum = 0);
        this.xPum > width && (this.xPum = width);
        this.yPum > height && (this.yPum = height);
        // if (this.xPum >= 0 && this.yPum >= 0 && this.xPum<= width &&this.yPum<= height) {
        this.$refs.fu.style.left = this.xPum + "px";
        this.$refs.fu.style.top = this.yPum + "px";
        // }
        //阻止页面的滑动默认事件
        document.addEventListener(
          "touchmove",
          function () {
            event.preventDefault();
          },
          false
        );
      }
    },
    //鼠标释放时候的函数
    end() {
      this.flags = false;
    },
    onClick() {
      //在这里我是作为子组件来使用的
      this.$emit("click");
    },

  },
  async created() {
    try {
      const driverInfo = await this.findDriverByTel();
      await this.jiedanshu();
      await this.liushui();
      await this.yunyingshichang();
    } catch (error) {
      console.error('页面初始化数据获取失败：', error);
    }
  },
};
</script>

<style scoped>
.zuo {
  text-align: left;
}

.yellow {
  font-size: 15px;
  margin-left: 15px;
  margin-top: 5px;
}

//悬浮窗
.callback p {
  font-size: 16px;
  color: #fff;
  background: rgba(56, 57, 58, 0.5);
  border-radius: 50%;
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-family: PingFang SC;
  font-weight: 600;
  box-shadow: 0 0 10px #fff;
}
.callback img {
  display: block;
  width: 50px;
  height: 50px;
  box-shadow: 0 0 10px rgb(133, 129, 129);
  border-radius: 50%;
  background: #fff;
}
.callback {
  position: fixed;
  top: 40px;
  left: 20px;
  z-index: 99999;
}
.float {
  position: fixed;
  right: 20px;
  top: 60%;
  touch-action: none;
  text-align: center;
  width: 50px;
  height: 50px;
  border-radius: 24px;
  line-height: 48px;
  color: white;
}

</style>
